<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 11:38:28
 * @FilePath     : \src\App.vue
-->
<script setup lang="ts">
import { readonly, shallowReadonly } from 'vue'

const shallowReadonlyObj = shallowReadonly({
  id: 1,
  name: 'front-refiend',
  childObj: { hobby: 'coding' }
});

//根级别的是只读的，无法修改
// shallowReadonlyObj.id = 2;

//嵌套属性可以修改，但非响应式的
const change = () => {
  shallowReadonlyObj.childObj.hobby = 'runnnig';
  console.log(shallowReadonlyObj)
}
</script>

<template>
  <h3>readonly</h3>
  <h5>
    作用：只有根级别的属性变为只读，只能读，不能写，写会警告
  </h5>
  <h5>
    注意：<br>
    1、根级别只读，不能修改；嵌套属性可读可改，但非响应式的 <br>
  </h5>
  <ul>
    <li>{{ shallowReadonlyObj.childObj }}</li>
    <li>{{ shallowReadonlyObj.childObj.hobby }}</li>
  </ul>
  <button @click="change">修改嵌套的</button>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
